<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        body,html,#container{
            height: 100%;
            margin: 0px;
            font-size: 12px;
        }
        .panel {
            color: #333;
            padding: 6px;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            background-color: #eee;
            top: 10px;
            right: 10px;
            border-radius: 5px;
            overflow: hidden;
            line-height: 20px;
        }
        #input{
            width: 250px;
            height: 25px;
        }
    </style>
    <title>设备位置信息</title>

</head>
<body>
<div id="container" tabindex="0"></div>
<div class ='panel'>
    地址显示位置:</br>
    <input id = 'input' value = '${billboardAddress.name}' />
    <div id = 'message'></div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e2fb4affacae5cb70f3ac9f3c69c8e46"></script>
<script type="text/javascript">
    var infoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-30)});
    var marker ,hotSpotMarker;
    var map = new AMap.Map('container',{
        resizeEnable: true,
        zoom: 15,
    });
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
            function(){
                map.addControl(new AMap.ToolBar());

                map.addControl(new AMap.Scale());

                map.addControl(new AMap.OverView({isOpen:true}));
            });
    AMap.plugin('AMap.Geocoder',function(){
        var geocoder = new AMap.Geocoder({
        });
        marker = new AMap.Marker({
            map:map,
            bubble:true
        })
        var input = document.getElementById('input');

        input.onchange = function(e){
            marker.content = "";
            var address = input.value;
            geocoder.getLocation(address,function(status,result){
                if(status=='complete'&&result.geocodes.length){
                    geocoder.getAddress(result.geocodes[0].location,function(status,result){
                        if(status=='complete'){
                            marker.content = result.regeocode.formattedAddress;
                        }else{
                            marker.content = "";
                        }
                    })
                    marker.on('click',markerClick);
                    marker.setPosition(result.geocodes[0].location);
                    map.setCenter(marker.getPosition());

                    var circle = new AMap.Circle({
                        center: result.geocodes[0].location,
                        redius: 100,
                        fillOpacity:0.1,
                        fillColor:'#09f',
                        strokeColor:'#09f',
                        strokeWeight:1
                    })
                    circle.setMap(map);
                    document.getElementById('message').innerHTML = ''
                }else{
                    document.getElementById('message').innerHTML = '获取位置失败'
                }
            })
        }
        input.onchange();
    });
    function markerClick(e){
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    // 监听热点点击
    map.on("hotspotclick", function(e) {
        if (hotSpotMarker) {
            hotSpotMarker.setMap(null);
        }
        hotSpotMarker = new AMap.Marker({
            position: e.lnglat,
            map: map,
            content: '<div id="hotspot">' + e.name + '</div>'
        });
    });
</script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>